<template>
  <div class="pos">
    <el-row>
      <el-col :span="7" class="pos-order" id="order-list">
        <el-tabs>
          <el-tab-pane label="点餐">
            <el-table :data="tableData" border width="100%">
              <el-table-column prop="goodsName" label="商品名称">

              </el-table-column>
              <el-table-column prop="count" label="数量" width="50">

              </el-table-column>
              <el-table-column prop="price" label="金额" width="70">

              </el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
                <template scope="scope">
                  <el-button type="text" size="small" @click="deleteOrder(scope.row)">删除</el-button>
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="total" v-show="totalCount">
              <div class="totalCount">
                <small>总数:</small>
                <span>{{ totalCount }}个</span>
              </div>
              <div class="totalMoney">
                <small>总额:</small>
                <span>￥{{ totalMoney }}元</span>
              </div>
            </div>
            <div class="list-btn-ground">
              <el-button type="warning" >挂单</el-button>
              <el-button type="danger" @click="delAllOrder">删除</el-button>
              <el-button type="success" @click="payOrder()">结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="挂单">
            挂单
          </el-tab-pane>
          <el-tab-pane label="外卖">
            外卖
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="17">
        <div class="often-goods">
            <div class="title">常用商品</div>
            <div class="often-goods-list">
                <ul>
                    <li v-for="item in oftenGoods" @click="addOrderList(item)">
                        <span>{{item.goodsName}}</span>
                        <span class="o-price">￥{{item.price}}元</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="goods-type">
          <el-tabs>
            <el-tab-pane label="汉堡">
              <ul class='cookList'>
                  <li v-for="item in type0Goods" @click="addOrderList(item)">
                      <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                      <span class="foodName">{{item.goodsName}}</span>
                      <span class="foodPrice">￥{{item.price}}.00元</span>
                  </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="小食">
                <ul class='cookList'>
                  <li v-for="item in type1Goods" @click="addOrderList(item)">
                      <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                      <span class="foodName">{{item.goodsName}}</span>
                      <span class="foodPrice">￥{{item.price}}.00元</span>
                  </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="饮料">
                <ul class='cookList'>
                  <li v-for="item in type2Goods" @click="addOrderList(item)">
                      <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                      <span class="foodName">{{item.goodsName}}</span>
                      <span class="foodPrice">￥{{item.price}}.00元</span>
                  </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="套餐">
                <ul class='cookList'>
                  <li v-for="item in type3Goods" @click="addOrderList(item)">
                      <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                      <span class="foodName">{{item.goodsName}}</span>
                      <span class="foodPrice">￥{{item.price}}.00元</span>
                  </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "pos",
  data() {
    return {
      tableData : [],
      oftenGoods: [],
      type0Goods: [],
      type1Goods: [],
      type2Goods: [],
      type3Goods: [],
      totalCount: 0,
      totalMoney: 0,
    };
  },
  created() {
    // 常用商品
    axios.get('http://jspang.com/DemoApi/oftenGoods.php').then(response => {
      this.oftenGoods = response.data;
    }).catch(error => {
      alert('网络错误，不能访问！')
    })
    //读取分类商品列表
    axios.get('http://jspang.com/DemoApi/typeGoods.php')
    .then(response=>{
        this.type0Goods=response.data[0];
        this.type1Goods=response.data[1];
        this.type2Goods=response.data[2];
        this.type3Goods=response.data[3];
    })
    .catch(error=>{
        alert('网络错误，不能访问');
    })
  },
  mounted: function() {
    var orderHeight = document.body.clientHeight;
    document.getElementById("order-list").style.height = orderHeight + "px";
  },
  methods: {
    addOrderList(goods) {
      // 添加商品
      this.totalCount = 0;
      this.totalMoney = 0;
      let isHave = false;
      // 判断是否存在订单列表
      for (var i = 0; i < this.tableData.length; i++) {
        var element = this.tableData[i];
        if(element.goodsId == goods.goodsId) {
          isHave = true;
        }
      }

      if(isHave) { // 存在,改变数量
        let arr = this.tableData.filter(o => o.goodsId == goods.goodsId);
        arr[0].count++;
      } else { // 不存在
        let newGoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
        this.tableData.push(newGoods);
      }

      this.tableData.forEach(item => {
        this.totalCount += item.count;
        this.totalMoney += item.price * item.count;
      })
    },
    deleteOrder(goods) {
      this.tableData = this.tableData.filter(item => {
        return item.goodsId != goods.goodsId;
      })
      this.totalCount = 0;
      this.totalMoney = 0;
      if (this.tableData) {
        this.tableData.forEach(item => {
          this.totalCount += item.count;
          this.totalMoney += item.price * item.count;
        })
      }
    },
    delAllOrder() { // 删除所有订单
      this.tableData = [];
      this.totalCount = 0;
      this.totalMoney = 0;
    },
    payOrder() { // 支付订单
      if (this.totalCount != 0) {
        this.tableData = [];
        this.totalCount = 0;
        this.totalMoney = 0;
        this.$message({
          message: '结账成功，感谢你又为店里出了一份力!',
          type: 'success'
        });
      } else {
        this.$message.error('不能空结。老板了解你急切的心情！');
      }
    }
  }
};
</script>

<style scoped>
.pos-order {
  background-color: #f9fafc;
  border-right: 1px solid #c0ccda;
}
.pos,
.el-row,
#order-list,
.el-tabs {
  height: 100%;
}

#order-list {
  background-color: #fff;
}

.list-btn-ground {
  margin: 10px auto;
  text-align: center;
}

.title {
  height: 21px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
}

.often-goods-list ul {
  margin: 10px auto;
}

.often-goods-list ul li {
  list-style: none;
  float: left;
  border: 1px solid #e5e9f2;
  padding: 10px;
  margin: 0px 3px 10px 3px;
  width: 147px;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
}

.o-name {
  float: left;
  color: #6e8299;
}

.o-price {
  float: right;
  color: #ff5722;
}

.goods-type {
  clear: both;
}

.cookList li {
  list-style: none;
  padding: 2px;
  margin: 0 10px 15px 0px;
  cursor: pointer;
  width: 23%;
  border: 1px solid #e5e9f2;
  height: auto;
  overflow: hidden;
  background-color: #fff;
  float: left;
  box-shadow: 0 2px 2px rgb(203, 208, 217);
}

.cookList li span {
  display: block;
  float: left;
}

.foodImg {
  width: 40%;
}

.foodName {
  font-size: 15px;
  height: 50%;
  line-height: 30px;
  width: 60%;
  color: #6e8299;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.foodPrice {
  font-size: 16px;
  height: 50%;
  line-height: 23px;
  width: 60%;
  color: #ff5722;
  text-align: center;
}

.total {
  height: 40px;
  line-height: 40px;
  background: #fff8e1;
  border: 1px solid rgb(231, 235, 243);
  border-top: 0px solid rgb(231, 235, 243);
}

.totalCount {
  width: 50%;
  float: left;
  text-align: right;
}

.totalCount span {
  color: #6e8299;
  padding: 0 10px;
}

.totalMoney {
  width: 50%;
  float: left;
  text-align: center;
}

.totalMoney span {
  color: #ff5722;
  padding: 0 10px;
}
</style>
